import React from 'react'
import {Swiper } from 'antd-mobile'
import { AntOutline, GlobalOutline,CompassOutline } from 'antd-mobile-icons'
import "./style.scss"
import { NavLink } from 'react-router-dom'
function index() {
    const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac']
    const iconTab=[{
        title:'口碑榜单',
        icon:<AntOutline color='green'/>
    },{
        title:'志愿者活动',
        icon:<GlobalOutline color='green'/>,
        path:'/More'
    },{
        title:'品牌榜单',
        icon:<CompassOutline color='green'/>
    }]
    const items = colors.map((color, index) => (
    <Swiper.Item key={index}>
        <div
        style={{ background: color }}
        >
        {index + 1}
        </div>
    </Swiper.Item>
    ))
    return (
        <div>
            <div className="content">
            <Swiper autoplay>{items}</Swiper>
            </div>
            <div className="iconLink">
                {
                    iconTab.map((v,i)=>{
                        return(
                            v.path?
                            <NavLink key={i} to={v.path}>
                                <dl>
                                    <dt>{v.icon}</dt>
                                    <dd>{v.title}</dd>
                                </dl>
                            </NavLink>
                            :<dl key={i}>
                                <dt>{v.icon}</dt>
                                <dd>{v.title}</dd>
                            </dl>
                        )
                    })
                }
                
            </div>
        </div>
    )
}

export default index
